<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      max-height="740px"
      ref="multipleTable" v-loading="loading">
      <el-table-column
        type="selection"
        width="55px">
      </el-table-column>
      <el-table-column
        prop="num"
        label="编号"
        width="55px">
      </el-table-column>
      <el-table-column
        label="标题">
        <template slot-scope="scope">
          <el-link
            :underline="false"
            v-on:click.native="showBlog(scope.row)">
            <router-link to="/blog/showBlog" tag="span">
              {{scope.row.title}}
            </router-link>
          </el-link>
        </template>
      </el-table-column>
      <el-table-column
        prop="author"
        label="作者">
      </el-table-column>
      <el-table-column
        label="分类">
        <template slot-scope="scope">
          <el-tag style="margin: 2px"
                  v-bind:key="scope.row.blogType">
            {{scope.row.blogType}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="标签">
        <template slot-scope="scope">
          <el-tag v-for="item in scope.row.blogLabel"
                  type="warning"
                  style="margin: 2px"
                  v-bind:key="item">
            {{item}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="阅读量" prop="reads" width="100px">

      </el-table-column>
      <el-table-column label="发布时间" prop="createTime">

      </el-table-column>
      <el-table-column label="上次修改" prop="updateTime">

      </el-table-column>
      <el-table-column
        label="操作" fixed="right" width="150px">
        <template slot-scope="scope">
          <BlogUpdate style="float: left;margin: 2px;"
                      :title="scope.row.title"
                      :article="scope.row.article"
                      :type="scope.row.blogType"
                      :label="scope.row.blogLabel"
                      :bid="scope.row.bid"
                      :editor-type="scope.row.editType">
          </BlogUpdate>

          <BlogDelete style="float: left;margin: 2px;"
                      :bid="scope.row.bid">
          </BlogDelete>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="total, prev, pager, next, jumper"
      :total="blogNum"
      style="padding-left: 0; margin-top: 10px;"
      v-on:current-change="currentPage">
    </el-pagination>
  </div>
</template>

<script>
import qs from "qs";
import BlogUpdate from "./BlogUpdate";
import BlogDelete from "./BlogDelete";
import marked from "marked";

export default {
  inject:['reload'],
  name: "ShowBlogMessage",
  props:['content'],
  components:{
    BlogUpdate,
    BlogDelete
  },
  data(){
    return{
      tableData: [],
      blogNum: 0,
      pageNumNow:1,
      start:0,
      bids:[],
      loading:true,
    }
  },
  mounted() {
    this.flashBlog();
    sessionStorage.removeItem("blogDetail");
  },
  methods: {
    currentPage(index){
      this.start=(index-1)*10;
      this.flashBlog();
    },
    flashBlog(){
      this.tableData=[];
      this.axios.post('/blog/queryAllBlogMessage',qs.stringify({
        start:this.start,
      })).then((response)=>{
        this.onloading();
        let reg = /<\/?.+?\/?>/g;
        let regPre = /<pre>[\s\S]*<\/pre>/g;
        for (let i=0; i<response.data.length; i++){
          let label = response.data[i].blogLabel.split(',');
          let blogs={
            num: 1,
            bid:'',
            tid:'',
            title: '',
            author: '',
            createTime:'',
            updateTime:'',
            article:'',
            blogType:'',
            blogLabel:[],
            reads:0,
            editType:1,
            likeNum: 0,
            abstract: '',
            commentsNum:0,
          };
          for(let j=0;j<label.length;j++){
            blogs.blogLabel.push(label[j]);
          }
          blogs.num=i+1;
          blogs.bid = response.data[i].bid;
          blogs.tid = response.data[i].tid;
          blogs.title = response.data[i].title;
          blogs.blogType = response.data[i].blogType;
          blogs.createTime = response.data[i].createTime;
          blogs.updateTime = response.data[i].updateTime;
          blogs.reads = response.data[i].reads;
          blogs.likeNum = response.data[i].likeNum;
          blogs.article = response.data[i].article;
          blogs.editType = response.data[i].editorType;
          let abstr = '';
          if (blogs.editType === 2) {
            abstr = marked(response.data[i].article).replace(regPre, "");
          } else {
            abstr = response.data[i].article.replace(regPre, "");
          }
          blogs.abstract = abstr.replace(reg, "").substring(0, 80);

          this.axios.post("/user/queryUserById",qs.stringify({
            id:response.data[i].uid
          })).then((response)=>{
            blogs.author = response.data.username;
          })

          this.axios.post("/blog/countCommentsNum",qs.stringify({
            bid:response.data[i].bid
          })).then((response)=>{
            blogs.commentsNum = response.data;
          })

          this.tableData.push(blogs);
        }
      })
      this.axios.post('/blog/countBlogNumber').then((response)=>{
        this.blogNum = response.data;
      })
    },
    showBlog(blog) {
      this.$store.commit('setBlog', blog);
      sessionStorage.setItem("blogDetail",JSON.stringify(blog));
    },
    getMultipleTable(){
      let datas = this.$refs.multipleTable.selection;

      if (datas.length===0){
        this.$message.info("尚未选中博客，无法删除");
      }else {
        for (let i = 0; i < datas.length; i++) {
          this.bids.push(datas[i].bid);
        }
        this.axios.post('/blog/deleteBlog', qs.stringify({
          bid: this.bids,
        })).then((response) => {
          this.$message.success(response.data.tip.toString());
          this.reload();
        });
      }
      this.bids=[];
    },
    open() {
      this.$confirm('是否确实删除博客?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.getMultipleTable();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    onloading(){
      setTimeout(()=>{
        this.loading=false;
      },500);
      return true;
    },
  },
}
</script>

<style scoped>

</style>
